Buy Now

Indexpage

Hidden

Index

Indexpage1

Start

Installation

Follow the steps below to get started with your Site Template:

  1. Unzip the downloaded zip file themeforest-xxxxx.zip folder
  2. Open folder named main-file
  3. Here you will find assets folders of all files
  4. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  5. Make sure you upload the required files/folders listed below:
    • css - Extra Stylesheets Folder plus Main Stylesheet File
    • images - Images Folder
    • jquery - Javacripts Folder
    • video - Videos Folder
    • .html extension files - main page template File
  6. You will need to Upload these files to your Web Server using FTP in order to use it on your Website and give the paths of files in .html extension files.
  7. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

Homepage1 Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area carbon-blue home-1-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body carbon-blue">
												<!-- Hero section start  -->
												<section class="hero-sec">
												......
												</section>
												<!-- Hero section End -->
												<!-- Logo carousel Start  -->
												<section class="logoMarqueeSection carbon-blue">
												......
												</section>
												<!-- Logo carousel End -->
												<!-- Welcome Section Start  -->
												<section class="welcome-section section-m-100 reveal1">
												......
												</section>
												<!-- Welcome Section End -->
												<!--Features Section Start  -->
												<section class="offer-section section-p-100" id="servicess">
												......
												</section>
												<!-- Features Section End -->
												<!--Offer Section Start  -->
												<section class="offer-section section-p-100" id="servicess">
												......
												</section>
												<!-- Offer Section End -->
												<!--Video section Start  -->
												<section class="video-section-overlay">
												......
												</section>
												<!-- Video section End -->
												<!--Famous listing section Start  -->
												<section class="famous-listing section-p-100">
												......
												</section>
												<!-- Famous listing section End -->
												<!--Get-Free-Consultation Start  -->
												<section class="consult-section">
												......
												</section>
												<!-- Get-Free-Consultation End -->
												<!--Featured cases Start  -->
												<section class="featured-cases section-p-100">
												......
												</section>
												<!--Featured cases End -->
												<!--Client’s Testimonial Start  -->
												<section class="client-testimonial section-p-100">
												......
												</section>
												<!--Client’s Testimonial End -->
												<!--Legal issue consultation Start  -->
												<section class="leagal-consultation">
												......
												</section>
												<!--Legal issue consultation End -->
												<!--Securing Justice Start  -->
												<section class="secure-section-wrap section-p-100">
												......
												</section>
												<!--Securing Justice  End -->
												<!--Counter Section Start  -->
												<section class="counter-section">
												......
												</section>
												<!--Counter Section End -->
												<!--Blog Section Start -->
												<section class="wakil-blog-layout section-p-100">
												......
												</section>
												<!--Blog Section End -->
												</div>
												<!--Content End -->
												<!--Footer top Start -->
												<section class="footer-top section-p-100 text-center" id="contact">
												......
												</section>
												<!--Footer top  End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Homepage2 Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="page-header-v2 home-2-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Hero section start  -->
												<section class="hero-sec-v2">
												......
												</section>
												<!-- Hero section End -->
												<!-- Welcome Section Start  -->
												<section class="welcome-section section-p-100 carbon-blue reveal1">
												......
												</section>
												<!-- Welcome Section End -->
												<!-- Vertical Cases Tab Start  -->
												<section class="tabs_wrapper section-p-100">
												......
												</section>
												<!-- Vertical Cases Tab End -->
												<!-- Logo carousel Start  -->
												<section class="marquees-wrapper carbon-blue">
												......
												</section>
												<!-- Logo carousel End -->
												<!--Offer Section Start  -->
												<section class="skilled-services section-p-100">
												......
												</section>
												<!-- Offer Section End -->
												<!--Get-Free-Consultation Start  -->
												<section class="consult-section" id="contact">
												......
												</section>
												<!-- Get-Free-Consultation End -->
												<!--Features Section Start  -->
												<section class="featured-cases section-p-100">
												......
												</section>
												<!-- Features Section End -->
												<!--Legal issue consultation Start  -->
												<section class="leagal-consultation legal-consult-v2">
												......
												</section>
												<!-- Legal issue consultation End -->
												<!--Client’s Testimonial Start  -->
												<section class="client-testimonial client-testimonial-v2 section-m-100 back-white">
												......
												</section>
												<!--Client’s Testimonial End -->
												<!--Footer top Start -->
												<section class="footer-top footer-top-v2 section-p-100 text-center" id="contact">
												......
												</section>
												<!--Footer top  End -->
												<!--Blog Section Start -->
												<section class="wakil-blog-layout wakil-blog-layout-v2  section-p-100 back-white-light">
												......
												</section>
												<!--Blog Section End -->
												</div>
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Homepage3 Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="page-header page-header-v3 back-white">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Hero section start  -->
												<section class="hero-sec">
												......
												</section>
												<!-- Hero section End -->
												<!-- Counter Section Start  -->
												<section class="counter-section counter-v3">
												......
												</section>
												<!--Counter Section End -->
												<!-- Split image Start  -->
												<section class="split-image-wrapper back-white section-p-100 reveal1">
												......
												</section>
												<!--Split image End -->
												<!-- Fight Violence Start   -->
												<section class="violence-wrapper violence-mob-wrap">
												......
												</section>
												<section class="sparkle-section back-white">
												......
												</section>
												<!--Fight Violence End -->
												<!-- Footer top Start   -->
												<section class="footer-top footer-top-v2 section-p-100 text-center" id="appointment1">
												......
												</section>
												<!--Footer top End -->
												<!-- Featured cases Start   -->
												<section class="featured-cases section-p-100 back-white">
												......
												</section>
												<!--Featured cases End -->
												<!-- Meet Our Expert Start   -->
												<section class="meet-expert back-white section-pb-100">
												......
												</section>
												<!--Meet Our Expert End -->
												<!-- Meet Our Expert Start   -->
												<section class="meet-expert back-white section-pb-100">
												......
												</section>
												<!--Meet Our Expert End -->
												<!-- Get free consultation & FAQs Start   -->
												<section class="form-v3 section-p-100"  id="contact">
												......
												</section>
												<!--Get free consultation & FAQs End -->
												<!--Blog Section Start -->
												<section class="wakil-blog-layout wakil-blog-layout-v2  section-p-100 back-white-light">
												......
												</section>
												<!--Blog Section End -->
												</div>
												<!-Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Homepage4 Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Hero section start  -->
												<section class="hero-sec hero-V4">
												......
												</section>
												<!-- Hero section End -->
												<!-- Fight Violence Start   -->
												<section class="back-white violence-mob-wrap violence-back-v4">
												......
												</section>
												<!--Fight Violence End -->
												<!-- Our client Succeed Start  -->
												<section class="client-wrap back-white section-p-100">
												......
												</section>
												<!--Our client Succeed End -->
												<!-- Offer Section Start  -->
												<section class="skilled-services section-p-100 carbon-blue" id="services4">
												......
												</section>
												<!--Offer Section End -->
												<!-- Subscribe Section Start  -->
												<section class="subscribe-wrap back-white">
												......
												</section>
												<!--Subscribe Section End -->
												<!-- Timeline Start  -->
												<section class="timeline-wrapper section-p-100 back-white">
												......
												</section>
												<!--Timeline End -->
												<!-- Counter Section Start  -->
												<section class="counter-section-v4">
												......
												</section>
												<!--Counter Section End -->
												<!-- Featured cases Start  -->
												<section class="featured-cases feature-gapping carbon-blue">
												......
												</section>
												<!--Featured cases End-->
												<!-- Securing Justice Start  -->
												<section class="secure-justice-wrap section-p-100">
												......
												</section>
												<!--Securing Justice End-->
												<!-- Legal issue consultation Start  -->
												<section class="leagal-consultation legal-consult-v2">
												......
												</section>
												<!--Legal issue consultation End-->
												<!-- Client’s Testimonial Start  -->
												<section class="client-testimonial client-test-v4 section-p-100">
												......
												</section>
												<!--Client’s Testimonial End-->
												<!-- Logo carousel Start  -->
												<section class="logoMarqueeSection lm-version-4">
												......
												</section>
												<!-- Logo carousel End-->
												<!-- Video 2 overlapping section Start  -->
												<section class="youtube-wrapper">
												......
												</section>
												<section class="video-section-overlay youtube-wrap">
												......
												</section>
												<!--Video 2 overlapping section End-->
												<!-- Blog Section Start  -->
												<section class="wakil-blog-layout wakil-blog-layout-v2 wakil-blog-layout-v4 section-p-100">
												......
												</section>
												<!-- Blog Section End-->
												<!-- Footer top Start  -->
												<section class="footer-top footer-top-v2 section-p-100 text-center" id="contact">
												......
												</section>
												<!-- Footer top End-->
												</div>
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Homepage5 ,Homepage6 Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area carbon-blue home-1-header home5-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!--Content End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
About Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner-->
												<!-- Our client Succeed Start  -->
												<section class="client-wrap back-white section-p-100 reveal1">
												......
												</section>
												<!-- Our client Succeed End -->
												<!-- Fight Violence Start  -->
												<section class="back-white violence-mob-wrap violence-back-v4 section-pb-100">
												......
												</section>
												<!-- Fight Violence End -->
												<!-- Welcome Section Start  -->
												<section class="welcome-section section-p-100 carbon-blue reveal1">
												......
												</section>
												<!-- Welcome Section End -->
												<!-- Timeline Start  -->
												<section class="timeline-wrapper section-p-100 back-white">
												......
												</section>
												<!-- Timeline End -->
												<!-- Counter Section Start  -->
												<section class="counter-section-v4">
												......
												</section>
												<!-- Counter Section End -->
												<!-- Featured cases Start  -->
												<section class="featured-cases feature-gapping carbon-blue">
												......
												</section>
												<!-- Featured cases End -->
												<!-- Securing Justice Start  -->
												<section class="secure-justice-wrap section-p-100">
												......
												</section>
												<!-- Securing Justice End -->
												<!-- Legal issue consultation Start  -->
												<section class="leagal-consultation legal-consult-v2">
												......
												</section>
												<!-- Legal issue consultation End -->
												<!-- Client’s Testimonial Start  -->
												<section class="client-testimonial client-test-v4 section-p-100">
												......
												</section>
												<!-- Client’s Testimonial  End -->
												<!-- Logo carousel Start  -->
												<section class="logoMarqueeSection lm-version-4">
												......
												</section>
												<!-- Logo carousel End -->
												<!-- Video 2 overlapping section Start  -->
												<section class="youtube-wrapper">
												......
												</section>
												<section class="video-section-overlay youtube-wrap">
												......
												</section>
												<!-- Video 2 overlapping section End -->
												<!-- Get free consultation & FAQs Start  -->
												<section class="form-v3 section-p-100 carbon-blue" id="contact">
												......
												</section>
												<!-- Get free consultation & FAQs End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Attorney1 Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner -->
												<!-- Securing Justice Start  -->
												<section class="secure-justice-wrap section-p-100">
												......
												</section>
												<!-- Securing Justice End -->
												<!-- Counter Section Start  -->
												<section class="counter-section-v4">
												......
												</section>
												<!-- Counter Section End -->
												<!-- Featured cases Start  -->
												<section class="featured-cases feature-gapping carbon-blue">
												......
												</section>
												<!-- Featured cases End -->
												<!-- Client’s Testimonial Start  -->
												<section class="client-testimonial client-test-v4 section-p-100">
												......
												</section>
												<!-- Client’s Testimonial End -->
												<!-- Logo carousel Start  -->
												<section class="logoMarqueeSection lm-version-4">
												......
												</section>
												<!-- Logo carousel End -->
												<!-- Get free consultation & FAQs Start  -->
												<section class="form-v3 section-p-100 carbon-blue" id="contact">
												......
												</section>
												<!-- Get free consultation & FAQs End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
BlogPage1 Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner -->
												<!-- Single content start  -->
												<section class="single-case-right-bar section-p-100">
												......
												</section>
												<!-- Single content End -->
												<!-- Footer top Start  -->
												<section class="footer-top footer-top-v2 section-p-100 text-center">
												......
												</section>
												<!-- Footer top End -->
												<!-- Client’s Testimonial Start  -->
												<section class="client-testimonial client-test-v4 section-p-100">
												......
												</section>
												<!-- Client’s Testimonial End -->
												<!-- Get free consultation & FAQs Start  -->
												<section class="form-v3 section-p-100 carbon-blue" id="contact">
												......
												</section>
												<!-- Get free consultation & FAQs End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Case Evaulation Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner -->
												<!-- MultiStep Form Start -->
												<section class="case-evaluation section-p-100">
												......
												</section>
												<!-- MultiStep Form End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Contact Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner -->
												<!--Single content start -->
												<section class="blog-sidebar-page section-p-100">
												......
												</section>
												<!-- Single content  End -->
												<!--Map Section Start -->
												<section class="map section-pb-100">
												......
												</section>
												<!-- Map Section  End -->
												<!--Footer top Start -->
												<section class="footer-top footer-top-v2 section-p-100 text-center">
												......
												</section>
												<!-- Footer top End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Error 404 Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner -->
												<!--404 EROOR Start -->
												<section class="client-testimonial client-test-v4 section-p-100">
												......
												</section>
												<!-- 404 EROOR  End -->
												<!--Get free consultation & FAQs Start -->
												<section class="form-v3 section-p-100 carbon-blue" id="contact">
												......
												</section>
												<!-- Get free consultation & FAQs End -->
												<!--Footer top Start -->
												<section class="footer-top footer-top-v2 section-p-100 text-center">
												......
												</section>
												<!-- Footer top End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Faq Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner -->
												<!--Main FAQs Start -->
												<section class="faq-main-wrap section-p-100">
												......
												</section>
												<!-- Main FAQs End -->
												<!--Get free consultation & FAQs Start -->
												<section class="form-v3 section-p-100 carbon-blue" id="contact">
												......
												</section>
												<!-- Get free consultation & FAQs End -->
												<!--Footer top Start -->
												<section class="footer-top footer-top-v2 section-p-100 text-center">
												......
												</section>
												<!-- Footer top End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Honours-Awards Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner -->
												<!--Left sidebar & Right content start -->
												<section class="our-history section-p-100">
												......
												</section>
												<section class="our-history section-p-100 reveal1">
												......
												</section>
												<!-- Left sidebar & Right content End -->
												<!--Get free consultation & FAQs Start -->
												<section class="form-v3 section-p-100 carbon-blue" id="contact">
												......
												</section>
												<!-- Get free consultation & FAQs End -->
												<!--Footer top Start -->
												<section class="footer-top footer-top-v2 section-p-100 text-center">
												......
												</section>
												<!-- Footer top End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Our Cases Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner -->
												<!--Tabs section for cases Start -->
												<section class="our-cases-tabs section-p-100">
												......
												</section>
												<!-- Tabs section for cases End -->
												<!--Video section Start Start -->
												<section class="video-section-overlay">
												......
												</section>
												<!-- Video section  End -->
												<!--Client’s Testimonial Start -->
												<section class="client-testimonial client-test-v4 section-p-100">
												......
												</section>
												<!--  Client’s Testimonial End -->
												<!--Get free consultation & FAQs Start -->
												<section class="form-v3 section-p-100 carbon-blue" id="contact">
												......
												</section>
												<!-- Get free consultation & FAQs End -->
												<!--Footer top Start -->
												<section class="footer-top footer-top-v2 section-p-100 text-center">
												......
												</section>
												<!-- Footer top End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Our Client Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner -->
												<!--client logos start -->
												<section class="client-grid-wrapper section-p-100">
												......
												</section>
												<!-- client logos End -->
												<!--Client’s Testimonial Start -->
												<section class="client-testimonial client-test-v4 section-p-100">
												......
												</section>
												<!--  Client’s Testimonial End -->
												<!--Get free consultation & FAQs Start -->
												<section class="form-v3 section-p-100 carbon-blue" id="contact">
												......
												</section>
												<!-- Get free consultation & FAQs End -->
												<!--Footer top Start -->
												<section class="footer-top footer-top-v2 section-p-100 text-center">
												......
												</section>
												<!-- Footer top End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Our History Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner -->
												<!--Left sidebar & Right content Start -->
												<section class="our-history section-p-100 reveal1">
												......
												</section>
												<section class="our-history reveal1">
												......
												</section>
												<section class="our-history section-p-100">
												......
												</section>
												<!-- Left sidebar & Right content End -->
												<!--Get free consultation & FAQs Start -->
												<section class="form-v3 section-p-100 carbon-blue" id="contact">
												......
												</section>
												<!-- Get free consultation & FAQs End -->
												<!--Footer top Start -->
												<section class="footer-top footer-top-v2 section-p-100 text-center">
												......
												</section>
												<!-- Footer top End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Our Service Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner -->
												<!--Fight Violence Start -->
												<section class="case-evaluation section-p-100">
												......
												</section>
												<section class="back-white">
												......
												</section>
												<!-- Fight Violence End-->
												<!-- Featured cases Start -->
												<section class="featured-cases section-p-100 carbon-blue">
												......
												</section>
												<!-- Featured cases End -->
												<!--  Client’s Testimonial Start -->
												<section class="client-testimonial client-test-v4 section-p-100">
												......
												</section>
												<!--  Client’s Testimonial End -->
												<!--Get free consultation & FAQs Start -->
												<section class="form-v3 section-p-100 carbon-blue" id="contact">
												......
												</section>
												<!-- Get free consultation & FAQs End -->
												<!--Footer top Start -->
												<section class="footer-top footer-top-v2 section-p-100 text-center">
												......
												</section>
												<!-- Footer top End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Pricing Plan Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner -->
												<!-- Pricing Plan Start -->
												<section class="faq-main-wrap section-p-100">
												......
												</section>
												<!--  Pricing Plan End-->
												<!-- Featured cases Start -->
												<section class="featured-cases feature-gapping feature-gapping1 carbon-blue">
												......
												</section>
												<!-- Featured cases End -->
												<!--  Client’s Testimonial Start -->
												<section class="client-testimonial client-test-v4 section-p-100">
												......
												</section>
												<!--  Client’s Testimonial End -->
												<!--Get free consultation & FAQs Start -->
												<section class="form-v3 section-p-100 carbon-blue" id="contact">
												......
												</section>
												<!-- Get free consultation & FAQs End -->
												<!--Footer top Start -->
												<section class="footer-top footer-top-v2 section-p-100 text-center">
												......
												</section>
												<!-- Footer top End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>
Testimonials Page Structure

Wakli follows a simple coding structure. here is the sample:

											
												<!DOCTYPE html>
												<html lang="zxx" dir="ltr">
												<!-- All your metas will be here -->
												<meta charset="UTF-8">
												<meta http-equiv="X-UA-Compatible" content="IE=edge">
												<meta name="viewport" content="width=device-width, initial-scale=1.0">
												<head>
												<!-- Your Stylesheets, Title -->
												...
												</head>
												<body>
												<!-- Page Wrapper Start -->
												<main class="site_content"> 
												<!-- The Preloader Before Site Load -->
												<div class="preloader">
												....
												</div>
												<!-- Header Start  -->
												<header class="header_area common-header home-3-header" id="header">
												...
												</header>
												<!-- Header End  -->
												<!-- Content Start  -->
												<div class="main-body">
												<!-- Start Header banner -->
												<section class="banner-header-section">
												......
												</section>
												<!-- End Header banner -->
												<!--  Client’s Testimonial Start -->
												<section class="client-testimonial client-testimonial-v2 section-m-100 back-white main-testimonials">
												......
												</section>
												<!--  Client’s Testimonial End -->
												<!--Get free consultation & FAQs Start -->
												<section class="form-v3 section-p-100 carbon-blue" id="contact">
												......
												</section>
												<!-- Get free consultation & FAQs End -->
												<!--Footer top Start -->
												<section class="footer-top footer-top-v2 section-p-100 text-center">
												......
												</section>
												<!-- Footer top End -->
												<!--Content End -->
												<!--Footer Start -->
												<footer class="footer-block-home-1">
												......
												</footer>
												<!--Footer End -->
												<!--Page cursor Start -->
												<div class="cursor cursor-shadow"></div>
												<div class="cursor cursor-dot"></div>
												<!--Page cursor End -->
												<!--Back-to-top Start -->
												<a class="back-to-top-text">
												......
												</a>
												<!--Back-to-top End -->
												</main>
												<!-- Page Wrapper End -->
												<!-- Your All Scripts will be here ->
												...
												</body>
												</html>

Logo Settings

The Logo Container can be found in the - home-1.htmlfile

											
												<div><a href="home-1.html" class="nav-header" ><img src="assets/images/brand/logo.svg" alt="Brand logo"></a></div>
Favicon

You can add a Favicon to your Website using the following code just bottom to the Stylesheet files links:

											
												<link rel="icon" href="assets/images/favicon/icon.png" >

Changing Fonts

Change your Fonts from Google Fonts Library directly if you plan to use a Google Font. You can find the Linking to the Font Files in the head tag

											
												<link href="https://fonts.googleapis.com/css2?family=Marcellus&display=swaphttps://fonts.googleapis.com/css2?family=Marcellus" rel="stylesheet">

Website Optimization Tips

A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

  • Image Compression & Optimization

    We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:

    • Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's <img> Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of 1200px x 800px in a Content Size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px
    • Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
    • Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
      For MAC use ImageOptim
      For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.
  • CSS & jQuery Minifications

    It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
    For CSS use CSS Minifier and For Javascript use Javascript Minifier.

  • Fast Web Hosting Servers

    A lot depends on your Web Hosting Servers, so it is recommended that you choose a Hosting Company/Server that provides a Reliable & a Fast Hosting Service. You can check out some recommended Hosting Services here: http://themeforest.net/get_hosting.

Topics

Topics
Tools

Modes

light

light

dark

dark

Sidebar

light

light

dark

dark

background

Bg-1

background

Bg-2

background

Bg-3

background

Bg-4

Backgrounds

default

Default

bg-1

Bg-1

bg-2

Bg-2

bg-3

Bg-3

bg-4

Bg-4

bg-5

Bg-5

Box Design

default

Default

box-1

Box-1

box-2

Box-2

box-3

Box-3